菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue 测试实例 - 小鸟启蒙(facesoho.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> Vue.component('button-counter', { template:'<button v-on:click="increment">{{ counter }}</button>', data:function () { return { counter:0 } }, methods:{ increment:function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el:'#counter-event-example', data:{ total:0 }, methods:{ incrementTotal:function () { this.total += 1 } } }) </script> </body> </html>
运行结果